<template>
	<main>
		<div class="Nav"></div>
		<div class="bottom">
			<li>
				<router-link to="/">
					<img src="../../assets/img/nav1-1.png"  v-if="page==1">
					<img src="../../assets/img/nav1.png" v-else>
					<h3>首页</h3>
				</router-link>
			</li>
			<li>
				<router-link to="/order">
					<img src="../../assets/img/nav2-1.png"  v-if="page==2">
					<img src="../../assets/img/nav2.png" v-else>
					<h3>订单</h3>
				</router-link>
			</li>
			<li>
				<router-link to="/user">
					<img src="../../assets/img/nav3-1.png"  v-if="page==3">
					<img src="../../assets/img/nav3.png" v-else>
					<h3>个人中心</h3>
				</router-link>
			</li>
		</div>
	</main>
</template>

<script>
export default{
	name:'Bottom',
	props:['topage'],
	data(){
		return {
			page:this.topage
		}
	}
}
</script>

<style scoped>
.Nav{
	height: 1.5rem;
	width: 100%;
}
a{
	display: block;
	text-decoration: none;
	color: black;
}
.bottom{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(255,255,255,.7);
	backdrop-filter:blur(20px);
	height: 1.3rem;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.bottom li{
	width: 30%;
	display: block;
	list-style: none;
	text-align: center;
	height: 1rem;
}
.bottom li img{
	width: 0.65rem;
	height: 0.65rem;
}
.bottom li h3{
	line-height: 0.6rem;
}
</style>
